<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <button> 首页</button>
  <button> 列表</button>
  <div id="route"></div>
  <div id="tiaozhuan">
    打开一个新的串口
  </div>
  <!-- <a href="http://www.baidu.com" target ="_blank">打开百度链接</a> -->
</body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
  
  ////////////////////微信关闭当前页面////////////////////
//   if(window.history && window.history.pushState) {
//     window.addEventListener('popstate', function(e) {
//       WeixinJSBridge.call('closeWindow');
// 		// var hashLocation = location.hash;
// 		// var hashSplit = hashLocation.split("#!/");
//     // var hashName = hashSplit[1];
//     // console.log(hashName)
// 		// if(hashName !== '') {
// 		// 	var hash = window.location.hash;
// 		// 	if(hash === '') {
// 		// 		alert("你点击了返回键");
// 		// 	}
// 		// }
// 	});
// 	window.history.pushState('forward', null, '#');
//  }
 ////////////////////微信关闭当前页面////////////////////


  var button = document.getElementsByTagName('button')
  var container = document.getElementById('route')
  var router = [{
      path: '/index',
      component: '<p>这个是首页</p>'
    },
    {
      path: '/list',
      component: '<p>这个是列表</p>'
    },
  ]
  button[0].onclick = function () {
    window.location.hash = '/index'
  }
  button[1].onclick = function () {
    window.location.hash = '/list'
  }
  //重定向
  function redirect() {
    var hash = window.location.hash;
    let flag = true;
    for (var i = 0; i < router.length; i++) {
      if ('#' + router[i].path === hash) {
        container.innerHTML = router[i].component
        flag = false
      }
    }
    if (flag) {
      container.innerHTML = router[0].component
    }
  }
  redirect()
  window.addEventListener('hashchange', function () {
    redirect()
  })
</script>

</html>